<template>
  <div class="w750" style="background: #fff;">
    <template v-if="MsgText != null">
      <div class="message-det">
        <div class="tit">{{ MsgText.title }}</div>
        <div class="time-writer">
          <span class="item">{{
            MsgText.recDate | dateformat("YYYY-MM-DD HH:mm:ss")
          }}</span>
          <!-- <span class="item">平台消息</span> -->
        </div>
        <div class="con">
          <p class="con-txt" v-html="MsgText.text">{{ MsgText.text }}</p>
        </div>
      </div>
      <div class="order-detail-foot" v-if="MsgText.msgType || MsgText.msgNumber">
        <div class="foot-box clearfix">
          <span
            class="foot-btn cur"
            :style="{background: themes.color,borderColor: themes.color}"
            @click="toView(MsgText.msgType, MsgText.msgNumber)"
            >查看详情</span
          >
        </div>
      </div>
    </template>

    <Noempty
      :pic="require('@/assets/images/mes-empty.png')"
      :title="'信息为空'"
      v-else
    />
  </div>
</template>

<script>
import { msgDet } from "api/message";
import Noempty from "components/Noempty/Noempty";
import { mapState } from "vuex";
export default {
  components: {
    Noempty,
  },
  computed: {
    ...mapState(["themes"]),
  },
  data() {
    return {
      MsgText: null,
      msgType: {
        order: ['order_shipping','order_modify_price','order_closed_by_shop','order_un_payment','order_auto_receipt'],
        afterSale: ['after_sale_refuse_apply','after_sale_return_purchase']
      }
    };
  },
  mounted() {
    let that = this;

    let msgId = this.$route.query.msgId;
    msgDet({
      msgId: msgId,
    }).then((res) => {
      if (res.status == 1) {
        if (res.result) {
          this.MsgText = res.result;
        }
      } else {
      }
    });
  },
  methods: {
    toView(msgType,msgNumber) {
      // 订单发货 ：order_shipping
      // 订单改价 : order_modify_price
      // 订单关闭 : order_closed_by_shop
      // 订单未支付 ：order_un_payment
      // 自动收货   ：order_auto_receipt
      // 售后退款成功 ：after_sale_refund
      // 卖家拒绝申请售后：after_sale_refuse_apply
      // 商家同意退货：提醒买家退货：after_sale_return_purchase

      this.msgType.order.includes(msgType) && this.$router.push({
        path: `/orderDetail`,
        query: {
          subNumber: msgNumber,
        }
      });

      this.msgType.afterSale.includes(msgType) && this.$router.push({
        path: `/afterSaleDetail`,
        query: {
          refundId: msgNumber,
        }
      });



    }
  },
  
};
</script>

<style src="../../../../assets/css/message.css" scoped></style>
<style lang="stylus" scoped>
.order-detail-foot {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 750px;
    background: #fff;
    margin: auto;
    display: flex;
    padding: 11px 0;
    font-size: 13px;
    line-height: 20px;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
    box-sizing: border-box;
    .foot-box {
      flex: 1;
      text-align: right;
      .foot-btn {
        border: 1px solid #e4e4e4;
        border-radius: 30px;
        display: inline-block;
        padding: 4px 15px;
        line-height: 18px;
        margin-right: 10px;
        font-size: 14px;
        color: #fff;
      }
    }
}
</style>
